<template>
  <div class="about">
    <h1>This is an about page</h1>
    <!-- <button @click="add">加num的值</button>
    <button @click="reduce">减num的值</button> -->
    <button @click="add_num(1000)">加num的值</button>
    <button @click="add_reduce(200)">减num的值</button>
    <button @click="mapd">自定义触发</button>
    {{$store.state.num}}
    <hr>
    {{num}}
  </div>
</template>
<script>
import { mapState, mapMutations } from 'vuex'
export default {
  methods: {
    add () {
      this.$store.commit('add_num', 100)
      // this.$store.state.num += 10
    },
    reduce () {
      this.$store.commit('add_reduce', 100)
      // this.$store.state.num += 10
    },
    mapd () {
      this.add_num(100)
    },
    ...mapMutations(['add_num', 'add_reduce'])
  },
  computed: {
    ...mapState(['num'])
  }
}
</script>
